<template>
  <div class="classdetailContainer" v-if="classInfo">
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="modalclose"
      custom-class="classdetail-dialog-bg"
      :before-close="handleClose"
    >
      <div class="classdetail">
        <classComponent :classInfo="classInfo" :studenttuitionmode="studenttuitionmode"></classComponent>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import classComponent from "./classComponent";
export default {
  components: {
    classComponent
  },

  data() {
    return {
      modalclose: false,
      studenttuitionmode: tool.getItem(lsKey.dict, true)["student_tuition_mode"]
    };
  },
  mounted() {
    let dicdata = tool.getItem(lsKey.dict, true);
    let student_tuition_mode = dicdata["student_tuition_mode"]; //学员班级状态
    for (let i = 0; i < student_tuition_mode.length; i++) {
      if (student_tuition_mode[i]["value"] == 6)
        student_tuition_mode[i]["name"] = "在读";
      this.studenttuitionmode[student_tuition_mode[i]["value"]] =
        student_tuition_mode[i]["name"];
    }
  },
  methods: {
    handleClose() {
      console.log(this.classInfo);
      this.$store.dispatch("classdetail/hideclassDetailPanel");
    }
  },
  computed: {
    ...mapState({
      isShow: state => state.classdetail.classDetailDialog
    }),

    ...mapGetters("classdetail", {
      classInfo: "getClassInfo"
    })
  }
};
</script>

<style lang="scss">
@import "@/style/module/utils.scss";
.classdetailContainer {
  .classdetail {
    width: inherit;
    padding: 0.3rem 0.31rem 0.3rem 0.31rem;
  }
  /**自定义对话框标题样式**/
  .panel_title {
    padding: 0.23rem 0.31rem 0.23rem 0.31rem;
    font-size: 0.22rem;
    font-family: "microsoft yahei";
    color: #333333;
  }
  /**
			 * 自定义对话框样式
			 */
  .classdetail-dialog-bg {
    background: #ffffff;
    width: 12rem !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>